// 最早的；使用ajax来显示数据
// $(function (){
//     //there to write
//
//     $.ajax({
//         url:"/api/student/list"
//
//     }).done(function (data){
//
//         //console.log(data)
//         let html="";
//         data.forEach((element, index) => {
//             html+="<tr>"
//             html+="<td>"+element.id+"</td>"
//             html+="<td>"+element.name+"</td>"
//             html+="<td>"+element.sex+"</td>"
//             html+="<td>"+element.age+"</td>"
//             html+="<td>"+element.sno+"</td>"
//             html+="</tr>"
//         })
//         $("#studentTb").html(html)
//     });
//
// });



// 之前的；加载所有学生的函数
function loadStudentList() {
    $.ajax({
        url: "/api/student/list"
    }).done(function (data) {
        let html = "";
        data.forEach((element, index) => {
            html += "<tr>";
            html += "<td>" + element.id + "</td>";
            html += "<td>" + element.name + "</td>";
            html += "<td>" + element.sex + "</td>";
            html += "<td>" + element.age + "</td>";
            html += "<td>" + element.tno + "</td>";

            html += "<td> <a href='#' onclick='showStudenDlg("+element.id
                +")'>编辑</a> &nbsp;&nbsp;<a href='#' onclick='deleteById("+
                +element.id+")'>删除</a></td>";

            html += "</tr>";
        });
        $("#studentTb").html(html);
    });
}

// 之前的自写的；绑定搜索按钮的点击事件
// $('#searchBtn').click(function () {
//     let searchName = $('#searchName').val(); // 获取输入框中的姓名
//     if (searchName) { // 如果输入框不为空
//         searchStudentsByName(searchName);
//     } else {
//         alert('请输入姓名进行搜索');
//     }
// });

// $('#searchSnoBtn').click(function () {
//     let searchSno = $('#searchSno').val(); // 获取输入框中的姓名
//     if (searchSno) { // 如果输入框不为空
//         searchStudentsBySno(searchSno);
//     } else {
//         alert('请输入学号进行搜索');
//     }
// });

// 之前的自写的；根据姓名搜索学生的函数
function searchStudentsByName(name) {
    $.ajax({
        url: "/api/student/find/" + encodeURIComponent(name) // 使用 encodeURIComponent 对姓名进行编码
    }).done(function (data) {
        let html = "";
        data.forEach((element, index) => {
            html += "<tr>";
            html += "<td>" + element.id + "</td>";
            html += "<td>" + element.name + "</td>";
            html += "<td>" + element.sex + "</td>";
            html += "<td>" + element.age + "</td>";
            html += "<td>" + element.tno + "</td>";

            html += "<td> <a href='#' onclick='showStudenDlg("+element.id
                +")'>编辑</a> &nbsp;&nbsp;<a href='#' onclick='deleteById("+
                +element.id+")'>删除</a></td>";

            html += "</tr>";
        });
        $("#studentTb").html(html);
    }).fail(function (error) {
        alert('搜索失败，请稍后再试');
    });
}

// 之前的自写的；根据学号搜索学生的函数
function searchStudentsBySno(Sno) {
    $.ajax({
        url: "/api/student/findSno/" + encodeURIComponent(Sno) // 使用 encodeURIComponent 对姓名进行编码
    }).done(function (data) {
        let html = "";
        data.forEach((element, index) => {
            html += "<tr>";
            html += "<td>" + element.id + "</td>";
            html += "<td>" + element.name + "</td>";
            html += "<td>" + element.sex + "</td>";
            html += "<td>" + element.age + "</td>";
            html += "<td>" + element.tno + "</td>";

            html += "<td> <a href='#' onclick='showStudenDlg("+element.id
                +")'>编辑</a> &nbsp;&nbsp;<a href='#' onclick='deleteById("+
                +element.id+")'>删除</a></td>";

            html += "</tr>";
        });
        $("#studentTb").html(html);
    }).fail(function (error) {
        alert('搜索失败，请稍后再试');
    });
}



// $(function () {
//     // 初始化页面时加载所有学生信息
//     loadStudentList();
//
// });
//***********************

let layerIndex;

/**
 * 弹出学生新增/更新对话框
 */
function showStudenDlg(id){

    let title="新增学生"
    if (id) {
        //id 存在,进行编辑
        title = "编辑学生"
        $("#formId").css("display","block");

        //读取学生信息并赋值
        $.ajax({
            url:"/api/student/"+id,
            method: "GET"

        }).done(result=>{

            console.log(result)

            $.each(result, function (key,value){
                var field = $('#studForm [name="' + key + '"]');

                if (field.is(':radio')){
                    field.filter('[value="' + value + '"]').prop('checked',true);
                }else if (field.is(':checkbox')){
                    field.prop('checked',value === "yes");
                }else {
                    field.val(value);
                }
            });
        })

    }else{
        //否则是新增
        $("#studForm")[0].reset();
        $("#formId").css("display","none");
    }
    layerIndex=layer.open({
        type: 1,
        title: "新增学生",
        area:['520px','auto'],
        content: $('#studForm') // 捕获层
    });
}




function getSearchCondtion(){

    let formData={}
    //遍历每个输入元素，将其值存储到formData对象中
    $('#queryForm').find('input,select').each(function (){
        let name = $(this).attr('name');//获取元素的name属性
        let value = $(this).val();

        //只有name属性存在且值不为空才会添加到formData中
        if (name && value){
            formData[name] = value;
        }
    });

    return formData
}

layui.use(function (){
    //1.验证表单是否合法
    layui.form.on('submit(stud-dlg)',function (data){
        event.preventDefault();//阻止表单默认提交

        commitStuDlg();
    })

    //（2）new;表格初始化

    const table = layui.table;

    let student = getSearchCondtion();

    //创建渲染实例
    table.render({
        elem: '#tbStudent',
        url: '/api/student/getbypage',//此处为静态模拟数据，实际使用需换成真实接口
        method: "POST",
        contentType: 'application/json',//确保以JSON格式发送
        where: {"data": student},
        page: true,
        cols: [[
            {type: 'checkbox',fixed: 'left'},
            {field: 'id',fixed: 'left',width: 80,title: 'id',sort: true},
            {field: 'name', title: '姓名'},
            {field: 'tno',title: '教师号',width: 150},
            {field: 'sex',width: 80,title: '性别',sort: true,
                templet: d => d.sex === 1 ? '男' : (d.sex === 2 ? '女' : '未知'),
            },
            {field: 'age',width: 100,title: '年龄',sort: true},
            {field: 'right',title: '操作',width: 134,minWidth: 125, templet: '#editTemplate'}
        ]],
        done:function (rs){
            //console.log(rs)
        }
    });

    table.on("tool(tbStudent)", function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
            $("#formId").css("display","block");
            $.each(data, function (key,value){
                var field = $('#studForm [name="' + key + '"]');

                if (field.is(':radio')){
                    field.filter('[value="' + value + '"]').prop('checked',true);
                }else if (field.is(':checkbox')){
                    field.prop('checked',value === "yes");
                }else {
                    field.val(value);
                }
            })
            layerIndex=layer.open({
                title:"编辑教师信息-id："+ data.id,
                type: 1,
                area: ['520px','auto'],
                content: $('#studForm')
            });
        }
    });



});


function  search(){
    let student = getSearchCondtion();

    const table = layui.table;
    table.reloadData("tbStudent", {
        where:{data:student}
    });
    console.log("where condition:"+JSON.stringify(student));
}

function deleteConfirm() {
    const table = layui.table;
    const checkStatus = table.checkStatus('tbStudent');
    const data = checkStatus.data;

    if (data.length === 0) {
        alert('请先选择至少一行');
        return;
    }

    const idsToDelete = data.map(item => item.id).join(', '); // 用于显示和发送请求的 ID 列表

    layer.confirm('真的删除选中的行么？', function (index) {
        data.forEach((item, index) => {
            $.ajax({
                url: `/api/student/delete/${item.id}`,
                method: "DELETE"
            }).done(result => {
                search();
            }).fail(error => {
                alert('删除失败');
            });
        });

        layer.close(index);
    });
}

function commitStuDlg(){

    let id=$("#id").val()
    let formData = $("#studForm").serialize();
    if (id!=null && id!=""){
        //是更新学生

        $.ajax({
            url:"/api/student/update",
            method:"PUT",
            data:formData
        }).done(result=>{
            console.log(result);
            if (result){

                //3.关闭弹出层
                console.log("修改成功！")
                alert('修改成功');
                layer.close(layerIndex);
                search();

                // 恢复按钮为可用状态
                $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
            }

        }).fail((jqXHR, textStatus, errorThrown)=> {
            console.error("Request failed: " + textStatus + " - " + errorThrown);
            //在这里处理错误逻辑
            alert("出现错误，请重试。");
        });


    }else {
        //是新增学生

        //新增学生
        //2.将表单数据发送到服务器的insert中，把提交按钮变灰

        $.ajax({
            url:"/api/student/add",
            method:"POST",
            data:formData
        }).done(result=>{
            console.log(result);
            if (result){

                //3.关闭弹出层
                console.log("添加成功！")
                alert("添加成功");
                layer.close(layerIndex);
                search();

                // 恢复按钮为可用状态
                $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
            }

        }).fail((jqXHR, textStatus, errorThrown)=> {
            console.error("Request failed: " + textStatus + " - " + errorThrown);
            //在这里处理错误逻辑
            alert("出现错误，请重试。");
        });


    }

    $("#btnOK").prop("disabled",true).addClass("layui-btn-disabled");//禁用按钮

}


function deleteById(id){
    //删除
    layer.confirm('你真的要删除吗？一旦删除，不可恢复！',{icon: 3}, function (){

        $.ajax({
            url:"/api/student/delete/"+id,
            method:"DELETE"
        }).done(result=>{
            loadStudentList();

        })
        layer.closeAll();
    },function (){

    });

}